import React, { useEffect } from 'react'
import { useAppDispatch } from '@/hooks'
import { getDictByParentIdAsync, useDictSelector } from '@/store/slice/dict'
import { Table } from 'antd'

function Dict() {
    const dispatch = useAppDispatch()
    const { dictList, isLoading } = useDictSelector()

    useEffect(() => {
        dispatch(getDictByParentIdAsync(1))
    }, [])

    // 扩开数据需要满足条件：dataSource所指定的数据中的元素（对象）需要拥有children属性，值为数组
    return (
        <div>
            <Table
                dataSource={dictList} // 数据数组
                rowKey={'id'} // 行 key 的取值
                pagination={false} // 是否展示分页
                loading={isLoading} // 是否展示加载中
                columns={[
                    {
                        title: '名称', // 表格列的标头
                        dataIndex: 'name' // 表格列的数据字段
                    },
                    {
                        title: '编码',
                        dataIndex: 'dictCode'
                    },
                    {
                        title: '值',
                        dataIndex: 'value'
                    },
                    {
                        title: '创建事件',
                        dataIndex: 'createTime'
                    }
                ]} // 列配置
                // 配置展开属性
                expandable={
                    // expanded:是布尔值，true 点开，false 折叠
                    // record:行信息
                    {
                        // 展开行渲染
                        onExpand: (expanded, record) => {
                            if (expanded) {
                                dispatch(getDictByParentIdAsync(record.id))
                            }
                        }
                    }
                }
            ></Table>
        </div>
    )
}

export default Dict
